<template>
    <div id="create-edit-container">
        <el-drawer
                direction="rtl"
                :visible.sync="stateManager.editDialogVisible"
                :title="modalTitle"
                custom-class="demo-drawer"
                ref="drawer"
                :before-close="closeDialog">
            <div class="dialog-drawer-content">
            <el-form ref="model" :model="model" :rules="ruleValidate">
                <!--姓名和指向类型-->
                <el-row type="flex" :gutter="20">
                    <el-col :span="12" >
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="model.name" placeholder="请填写姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="model.username"  placeholder="请填写用户名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  type="flex" :gutter="20" v-if="stateManager.editModelId === 0">
                    <el-col :span="12" >
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="model.password" type="password" placeholder="请填写密码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item label="确认密码" prop="confirm_password">
                            <el-input v-model="model.confirm_password" type="password" placeholder="请确认密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  type="flex" :gutter="20">
                    <el-col :span="12" >
                        <el-form-item label="权限" prop="permissions">
                            <el-select v-model="model.permissions" style="width: 100%" placeholder="请选择用户权限">
                                <el-option
                                        v-for="item in rolesList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
                <div class="dialog-drawer-footer">
                    <el-button type="ghost" @click="closeDialog" >取消</el-button>
                    <el-button type="primary" @click="saveModel"   :loading="stateManager.buttonLoading" >{{stateManager.buttonLoading?'提交中':'确定'}}</el-button>
                </div>
            </div>

        </el-drawer>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data:  function() {
      const validatePassword = (rule, value, callback) => {
        if (value === this.model.password) {
          callback();
        } else {
          callback(new Error( this.$t('admin.confirm_password.validate')));
        }
      };
      return {
        model: this.$modelDataSource({
          url:'/api/admin',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
            username:'',
            permissions:''
          }
        }),
        isLoading: false,
        ruleValidate: {
          name: [
            {required: true, message: '请填写姓名', trigger: 'blur'}
          ],
          username: [
            {required: true, message:'请填写用户名',trigger: 'blur'},
            {max:15,min:5, message:'用户名长度在5-15个字符之间',trigger: 'blur'}
          ],
          permissions: [
            {required: true, message: '请选择用户权限', trigger: ['blur','change']},
          ],
          password: [
            {required: true, message:'请输入密码', trigger: 'blur'},
            {max:15,min:6, message:'密码长度在6-15个之间',trigger: 'blur'}
          ],
          confirm_password: [
            {type:'String',validator:validatePassword},
            {required: true, trigger: 'blur'},
            {min:6, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      closeDialog: function () {
        if(this.stateManager.buttonLoading){
          return false
        }
        this.stateManager.editDialogVisible = false
        this.stateManager.listLoading = false
        this.model.reset()
        this.$refs['model'].resetFields()
        this.stateManager.editModelId = 0
      },
      saveModel: function () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.isLoading = false
            self.stateManager.buttonLoading = true
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.refreshList = true
                self.stateManager.buttonLoading = false
                self.closeDialog()
              }, function (errors) {
                self.stateManager.buttonLoading = false
                self.isLoading = false
                self.$message.error('保存失败')
              })
          } else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
          'rolesList'
      ]),
      modalTitle () {
        switch (this.stateManager.editModelId) {
          case 0:
            return '添加用户信息'
            break
          default:
            return '编辑用户信息'
        }
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, { include:'update' }, function () {
          self.stateManager.editDialogVisible = true
        }, function () {
          self.stateManager.listLoading = false
        })
      }
    }
  }
</script>
